<script setup>
import { userRegisterService, userLoginService } from '@/api/user.js'
import { ElMessage } from 'element-plus'
import { ref, watch } from 'vue'
import { useUserStore } from '@/stores'
import { useRouter } from 'vue-router'
const login_form = ref()
const reg_form = ref()

// 表单切换
const isActive = ref(false)
const signup = () => {
  isActive.value = true
}
const signin = () => {
  isActive.value = false
}

// 整个表单用于提交的form数据对象
const login_model = ref({
  username: '',
  password: ''
  // phone: '',
  // email: '',
  // profile: '',
  // createTime: '',
  // delTime: '',
  // delFlag: '',
  // universityName: '',
  // major: '',
  // age: '',
  // degree: '',
  // identity: '',
  // expect: '',
  // sex: ''
})
// const login_model = ref({
//   username: '',
//   password: ''
// })
//注册信息
const register_model = ref({
  username: '',
  password: '',
  repassword: '',
  email: '',
  phoneNumber: ''
})
// 整个表单的校验规则
//1.非空校验
//2.长度校验
//3.正则校验
const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'change' }, // 非空校验
    { min: 5, max: 12, message: '用户名必须是 5-12位 的字符', trigger: 'blur' } //长度校验
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'change' },
    {
      // 正则校验
      pattern: /^\S{6,15}$/,
      message: '密码必须是 6-15位 的 非空字符',
      trigger: 'blur'
    }
  ],
  repassword: [
    { required: true, message: '请输入密码', trigger: 'change' },
    {
      // 正则校验
      pattern: /^\S{6,15}$/,
      message: '密码必须是 6-15位 的 非空字符',
      trigger: 'blur'
    },
    // 自定义校验
    {
      validator: (rule, value, callback) => {
        // 判断 value 和 当前 form 中的 password 是否一直
        if (value !== register_model.value.password) {
          callback(new Error('两次输入密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'change' },
    {
      pattern: /^([A-Za-z0-9_\-.])+@([A-Za-z0-9_\-.])+\.([A-Za-z]{2,4})$/,
      message: '请输入正确的邮箱格式',
      trigger: 'blur'
    }
  ],
  phoneNumber: [
    { required: true, message: '请输入邮箱', trigger: 'change' },
    {
      pattern: /^1[34578]\d{9}$/,
      message: '请输入正确的手机号格式',
      trigger: 'blur'
    }
  ]
}

const userStore = useUserStore()
const router = useRouter()
const Login = async () => {
  await login_form.value.validate()
  console.log(login_model.value)
  const res = await userLoginService(login_model.value)
  userStore.setToken(res.data.data.token)
  ElMessage.success('登录成功')
  router.push('/')
}

const Register = async () => {
  // 注册成功之前， 先进行预校验  成功->发送请求 ；失败->自动弹出
  await reg_form.value.validate()
  const reg = ref({
    username: register_model.value.username,
    password: register_model.value.password,
    email: register_model.value.email,
    phone: register_model.value.phoneNumber
  })
  await userRegisterService(reg.value)
  ElMessage.success('注册成功')
  isActive.value = false
}

// 切换时重置表单内容
watch(isActive, (newValue) => {
  if (newValue === true) login_form.value.resetFields()
  else reg_form.value.resetFields()
})
</script>

<template>
  <div class="bodybox" :class="{ signup: isActive }">
    <div class="containers">
      <span></span>
      <span></span>
      <span></span>
      <el-form
        id="signinForm"
        class="elForm"
        ref="login_form"
        size="large"
        :model="login_model"
        :rules="rules"
      >
        <h2>登录</h2>
        <el-form-item class="inputBox" prop="username">
          <el-input
            type="text"
            placeholder="用户名"
            v-model.lazy="login_model.username"
            calss="elInput"
            prefix-icon="User"
          />
        </el-form-item>
        <el-form-item class="inputBox" prop="password">
          <el-input
            type="password"
            placeholder="密码"
            v-model.lazy="login_model.password"
            calss="elInput"
            prefix-icon="lock"
          />
        </el-form-item>
        <div class="inputBox group">
          <a href="#">忘记密码？</a>
          <a href="#" id="signup" @click="signup">注册</a>
        </div>
        <div class="inputBox">
          <el-button type="primary" calss="elButton" @click="Login">
            登录
          </el-button>
        </div>
      </el-form>

      <el-form
        id="signupForm"
        class="elForm"
        ref="reg_form"
        size="large"
        :model="register_model"
        :rules="rules"
      >
        <el-form-item><h2>注册</h2></el-form-item>
        <el-form-item class="inputBox" prop="username">
          <el-input
            type="text"
            placeholder="用户名"
            v-model="register_model.username"
            prefix-icon="User"
          />
        </el-form-item>
        <el-form-item class="inputBox" prop="password">
          <el-input
            type="password"
            placeholder="输入密码"
            v-model="register_model.password"
            prefix-icon="lock"
          />
        </el-form-item>
        <el-form-item class="inputBox" prop="repassword">
          <el-input
            type="password"
            placeholder="确认密码"
            v-model="register_model.repassword"
            prefix-icon="lock"
          />
        </el-form-item>
        <el-form-item class="inputBox" prop="email">
          <el-input
            type="text"
            placeholder="邮箱"
            v-model="register_model.email"
            prefix-icon="Message"
          />
        </el-form-item>
        <el-form-item class="inputBox" prop="phoneNumber">
          <el-input
            type="text"
            placeholder="手机号"
            v-model="register_model.phoneNumber"
            prefix-icon="Promotion"
          />
        </el-form-item>
        <el-form-item class="inputBox">
          <el-button type="primary" class="elButton" @click="Register">
            注册
          </el-button>
        </el-form-item>
        <el-form-item class="inputBox group">
          <a href="#">已有账户？<b id="signin" @click="signin">登录</b></a>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style lang="scss" scoped src="@/assets/css/LoginCss.css"></style>
